import React, { memo, useEffect } from 'react'
import type { ReactNode } from 'react'
import { DjRadioWrapper } from './style'
import DjCategory from './c-pages/dj-category'
import DjRecommend from './c-pages/dj-recommend'
import DjRadioRanking from './c-pages/dj-ranking'
import { useAppDispatch } from '@/store'
import { fetchDjRadioCategoryAction, fetchDjRadioRecommendAction } from './store/djradio'



interface IProps {
  children?: ReactNode
}

const Djradio: React.FC<IProps> = () => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchDjRadioCategoryAction())
    dispatch(fetchDjRadioRecommendAction(3))
  }, [])
  return (
    <DjRadioWrapper className="wrap-v2">
      <DjCategory />
      <DjRecommend />
      <DjRadioRanking />
    </DjRadioWrapper>
  )
}

export default memo(Djradio)
